import { Component, Prop, Vue, Watch } from 'vue-facing-decorator'
import toNative from '@/utils/toNative'
import type { FilterDto } from '@/render/FilterRender'
import type { VxeColumnSlotTypes, VxeGridPropTypes, VxeTableDataRow } from 'vxe-table'
import TableRender, { renderSlotButtons, type TableRenderColumnTypes } from '@/render/TableRender'
import type { AnyObject } from '@/types'
import { PlusOutlined, SearchOutlined, UserOutlined } from '@ant-design/icons-vue'
import { Button, Image, message } from 'ant-design-vue'
import { h } from 'vue'
import { getMenuList, removeMenu } from '@/api/system'
import { getKeyToEnum, MenuStatusCnEnum, PlatformTypeCnEnum } from '@/const/enum'
import DialogAddMenu from './components/DialogAddMenu'
import type { MenuDto } from '@/api/system/types'
import type { AddType } from '@/api/types'

@Component
export class MenuView extends TableRender {
    @Prop() deptId!: number
    @Prop() deptName!: string

    showAdd = false

    curStaffUserId = null as null | number

    addType = 'add'
    curMenu = {} as MenuDto

    @Watch('deptId')
    handleWatchDeptId() {
        this.reloadPage(1)
    }

    tableConfig() {
        const obj = {
            treeConfig: { transform: true, rowField: 'menuId', parentField: 'parentId' },
            ...super.tableConfig()
        }
        return obj
    }

    filterConfig() {
        return {
            menuName: {
                name: '菜单名称',
                element: 'input'
                // placeholder: '请输入菜单名称',
            },
            status: {
                name: '状态',
                element: 'select',
                options: getKeyToEnum(MenuStatusCnEnum)
                // placeholder: '请输入菜单名称',
            },
            platform: {
                name: '所属平台',
                element: 'select',
                options: getKeyToEnum(PlatformTypeCnEnum),
                value: PlatformTypeCnEnum.新运营平台
            }
        } as FilterDto
    }

    tableColumnConfig() {
        return [
            {
                field: 'menuName',
                title: '菜单名称',
                treeNode: true
            },
            // {
            //     field: 'icon',
            //     title: '图标',
            //     width: 110
            // },
            {
                field: 'orderNum',
                title: '排序'
            },
            {
                field: 'status',
                title: '状态',
                formatter: ({ row }) => {
                    return MenuStatusCnEnum[row.status as keyof typeof MenuStatusCnEnum]
                }
            },
            {
                field: 'btnPosition',
                title: '按钮位置'
            },
            {
                field: 'path',
                title: '地址'
            },
            {
                field: 'btnEvent',
                title: '触发事件'
            },
            {
                field: 'perms',
                title: '权限'
            },
            {
                field: 'createTime',
                title: '创建时间'
            },
            {
                field: 'operate',
                title: '操作',
                fixed: 'right',
                width: 300,
                params: {
                    buttons: renderSlotButtons(this)
                },
                slots: {
                    default: 'buttons'
                }
            }
        ] as TableRenderColumnTypes<MenuDto>
    }
    async onRowRemove(row: MenuDto) {
        await removeMenu(row.menuId)
        message.success('删除成功')
        this.reloadPage()
    }
    onRowEdit(row: MenuDto) {
        this.onShowDetail('edit', row)
    }
    onRowAdd(row: MenuDto) {
        this.onShowDetail('add', row)
    }

    onShowDetail(type: AddType, row?: MenuDto) {
        console.log(this)
        this.addType = type
        row && (this.curMenu = row)
        this.showAdd = true
    }

    onToDepartMember() {
        this.$router.push({
            path: '/system/department-member'
        })
    }

    async onLoadData(page: number, size: number, filters: AnyObject) {
        return getMenuList({
            ...filters
        })
    }

    render() {
        return (
            <div class="h-full">
                {super.render()}
                <DialogAddMenu
                    v-model:show={this.showAdd}
                    addType={this.addType as AddType}
                    menuData={this.curMenu}
                    onRefresh={this.reloadPage}
                />
            </div>
        )
    }
}

export default toNative<{}, {}>(MenuView)
